<template>
  <div class="nav">
    <div class="nav_info" @click="go(1)" :class="page == 1 ? 'active' : ''">
      <i class="iconfont icon-zhuye" style="font-size: 20px"></i>
      <span>主页</span>
    </div>
    <div class="nav_info" @click="go(2)" :class="page == 2 ? 'active' : ''">
      <i class="iconfont icon-diancan-2" style="font-size: 17px"></i>
      <span>外卖</span>
    </div>
    <div class="nav_info" @click="go(3)" :class="page == 3 ? 'active' : ''">
      <i class="iconfont icon-baoxiu-xuanzhong" style="font-size: 20px"></i>
      <span>报修</span>
    </div>
    <div class="nav_info" @click="go(4)" :class="page == 4 ? 'active' : ''">
      <i class="iconfont icon-wode" style="font-size: 20px"></i>
      <span>我的</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
    };
  },

  methods: {
    go(pageNum) {
      if (pageNum == 1) {
        if (pageNum == this.page) {
          return;
        } else {
          this.$router.push('/');
          this.page = pageNum;
        }
      }
      if (pageNum == 2) {
        if (pageNum == this.page) {
          return;
        } else {
          this.$router.push('/takeOut');
          this.page = pageNum;
        }
      }
      if (pageNum == 3) {
        if (pageNum == this.page) {
          return;
        } else {
          this.$router.push('/repair');
          this.page = pageNum;
        }
      }
      if (pageNum == 4) {
        if (pageNum == this.page) {
          return;
        } else {
          this.$router.push('/my');
          this.page = pageNum;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  background-color: #ffffff;
  height: 55px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  .active {
    color: #ffcf01;
  }
  .nav_info {
    margin-right: 30px;
    margin-left: 30px;
    .iconfont {
      display: block;
    }
  }
}
</style>